import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Dimensions, RefreshControl,Platform } from 'react-native';
import { BoxShadow } from 'react-native-shadow';
import { Echarts, echarts } from 'react-native-secharts';
import { Toast, Flex } from 'antd-mobile-rn';
import api from '../../../utils/api';
import constants from '../../../utils/constants';

const window = Dimensions.get("window");

const styles = StyleSheet.create({
    boxStyle: {
        flex: 1,
        backgroundColor: "#fff",
        padding: 15,
        borderRadius: 10,
        borderWidth: 1,
        marginBottom: 20,
        borderColor: Platform.OS === "ios"?"rgba(0,0,0,0.1)":"rgba(0,0,0,0.01)",
        elevation: 5,
        shadowColor:"#000",
        shadowOffset:{
            shadowOffsetX:5
        },
        shadowOpacity:0.2,
        shadowRadius:10
    }
})


export default class Report extends Component {

    static navigationOptions = (e) => {
        return {
            title: "刷题报告"
        }
    }

    state = {
        refreshing: false,
        type: 1,
        report: {
            loading: true,
            data: [],

        },
        process: {
            loading: true,
            data: []
        }
    }

    loadReport = (type) => {
        const { report } = this.state;
        api({
            url: "/examRecord/data-statistics/report",
            method: "POST",
            body: {
                timeType: type
            }
        }).then(data => {
            report.loading = false;
            report.data = data.result;

            this.setState({
                report: report
            })

        }).catch(data => {
            report.loading = false;
            this.setState({
                report: report
            })
        })

    }

    loadProcess = () => {
        const { process } = this.state;
        api({
            url: "/examRecord/data-statistics/process",
            method: "POST",
            body: {}
        }).then(data => {
            process.loading = false;
            process.data = data.result.lineVos;

            this.setState({
                process: process
            })

        }).catch(data => {
            process.loading = false;
            this.setState({
                process: process
            })
        })
    }



    componentDidMount() {
        this.loadReport(1);
        this.loadProcess();
    }

    loadData = () => {
        this.loadReport(this.state.type);
        this.loadProcess();
    }

    render() {

        const { report, process } = this.state;

        return (
            <ScrollView
                refreshControl={
                    <RefreshControl
                        colors={[constants.themeColor]}
                        refreshing={this.state.refreshing}
                        onRefresh={() => {
                            this.setState({
                                refreshing: true
                            })
                            this.loadData();
                            setTimeout(() => {
                                this.setState({
                                    refreshing: false
                                });
                            }, 1500)
                        }}
                        progressBackgroundColor="#fff"

                    />
                }
            >


                <View style={{ padding: 20 }}>
                   
                        <View style={styles.boxStyle}>
                            <View style={{ position: "relative", marginBottom: 10 }}>
                                <Text style={{ color: "#000", fontSize: 16 }}>诊断报告</Text>
                                <View style={{
                                    position: "absolute",
                                    right: 5,
                                    flexDirection: "row"
                                }}>
                                    <Text onPress={() => {
                                        this.setState({
                                            type: 1
                                        })
                                        this.loadReport(1)
                                    }} style={{ color: this.state.type == 1 ? "orange" : "#666" }}>本周</Text>
                                    <Text> | </Text>
                                    <Text onPress={() => {
                                        this.setState({
                                            type: 2
                                        })
                                        this.loadReport(2)
                                    }} style={{ color: this.state.type == 2 ? "orange" : "#666" }}>合计</Text>
                                </View>
                            </View>
                            {
                                report.data.map((item, index) => {
                                    console.log("item;", item);

                                    let total = 0;

                                    item.tableDataVos.forEach(item => {
                                        total += item.errorNum;
                                    })

                                    return (


                                        <View key={index} style={{ flex: 1, overflow: "hidden",paddingBottom:15, flexDirection: "row", marginBottom: 15,borderBottomColor:"#ddd",borderBottomWidth:index===0?2:0 }}>
                                            <View style={{alignItems:"center",justifyContent:"center",textAlignVertical: 'center',}}>
                                                <View style={{ height: 160, position: "relative" }}>
                                                    <View
                                                        style={{
                                                            position: "absolute",
                                                            top: 65,
                                                            left: 25,
                                                            alignItems: "center"
                                                        }}
                                                    >
                                                        <Text style={{ fontSize: 10 }}>{item.label}错题</Text>
                                                        <Text style={{ fontSize: 10 }}>{total}</Text>
                                                    </View>
                                                    <Echarts width={90} height={150} option={{
                                                        tooltip: {
                                                            trigger: 'item',
                                                            position: [5, 15],
                                                            formatter: "{b} : <br/> {c} ({d}%)",
                                                            textStyle: {
                                                                fontSize: 10
                                                            }
                                                        },

                                                        calculable: true,
                                                        series: [
                                                            {

                                                                type: 'pie',
                                                                radius: ['50%', '70%'],
                                                                itemStyle: {
                                                                    normal: {
                                                                        label: {
                                                                            show: false
                                                                        },
                                                                        labelLine: {
                                                                            show: false
                                                                        }
                                                                    },

                                                                },
                                                                data: item.tableDataVos.map(vo => {
                                                                    return {
                                                                        value: vo.errorNum,
                                                                        name: vo.questionType
                                                                    }
                                                                })
                                                            }
                                                        ]
                                                    }}></Echarts>
                                                </View>
                                            </View>
                                            <View style={{ width: (window.width - 150), }}>

                                                <Flex style={{ marginTop: 10, marginBottom: 10 }}>
                                                    <Flex.Item></Flex.Item>
                                                    <Flex.Item>
                                                        <Text style={{ fontSize: 12 }}>正确率</Text>
                                                    </Flex.Item>
                                                    <Flex.Item>
                                                        <Text style={{ fontSize: 12 }}>错题数</Text>
                                                    </Flex.Item>
                                                    <Flex.Item>
                                                        <Text style={{ fontSize: 12 }}>刷题数</Text>
                                                    </Flex.Item>
                                                </Flex>
                                                <View style={{ padding: 5 }}>

                                                    {
                                                        item.tableDataVos.map((vo, index) => {
                                                            return (
                                                                <Flex key={index} style={{ marginBottom: 10 }} >
                                                                    <Flex.Item style={{}} >
                                                                        <Text style={{ fontSize: 11 }}>{vo.questionType}</Text>
                                                                    </Flex.Item>
                                                                    <Flex.Item style={{ padding: 1, alignItems: "center" }}>
                                                                        <Text style={{ fontSize: 11 }}>{vo.correctRate}</Text>
                                                                    </Flex.Item>
                                                                    <Flex.Item style={{ padding: 1, alignItems: "center" }}>
                                                                        <Text style={{ fontSize: 11 }}>{vo.errorNum}</Text>
                                                                    </Flex.Item>
                                                                    <Flex.Item style={{ padding: 1, alignItems: "center" }}>
                                                                        <Text style={{ fontSize: 11, alignItems: "center" }}>{vo.total}</Text>
                                                                    </Flex.Item>
                                                                </Flex>
                                                            )
                                                        })
                                                    }

                                                </View>


                                            </View>

                                        </View>


                                    )
                                })
                            }
                        </View>
                    
                  
                        <View style={styles.boxStyle}>
                            <View>
                                <Text style={{ color: "#000", fontSize: 16 }}>刷题进程</Text>
                            </View>
                            {
                                process.data.map((item, index) => {
                                    let w = Object.keys(item.datas).length * 45;
                                    if (w < (window.width - 35)) {
                                        w = window.width - 35
                                    }
                                    return (
                                        <View key={index} style={{ flex: 1 }}>
                                            <View style={{ overflow: "hidden", marginBottom: 15, height: 200 }}>
                                                <ScrollView horizontal={true}>
                                                    <Echarts width={w} height={200} option={{
                                                        calculable: true,
                                                        tooltip: {
                                                            trigger: 'axis',
                                                            formatter: "{b} : {c}"
                                                        },
                                                        grid: {
                                                            y: 50,
                                                            x: 25,
                                                            x2: 45,
                                                            y2: 30

                                                        },
                                                        color: [item.label === "听力" ? "#FBB343" : "#0EBBAA"],
                                                        xAxis: [
                                                            {
                                                                name:"剑桥",
                                                                type: 'category',
                                                                data: Object.keys(item.datas).map(key => key),
                                                                axisLabel: {
                                                                    interval: 0,
                                                                    rotate: 0
                                                                }
                                                            }
                                                        ],
                                                        yAxis: [
                                                            {
                                                                name:"分数",
                                                                type: 'category',
                                                                data: [0, 4,5,5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9]


                                                            }
                                                        ],
                                                        series: [
                                                            {

                                                                type: 'line',
                                                                smooth: true,
                                                                itemStyle: {
                                                                    normal: {
                                                                        lineStyle: {
                                                                            shadowColor: 'rgba(0,0,0,0.4)'
                                                                        }
                                                                    }
                                                                },
                                                                data: Object.keys(item.datas).map(key => item.datas[key])
                                                            }
                                                        ]
                                                    }}></Echarts>

                                                </ScrollView>

                                            </View>
                                            <View style={{ alignItems: "center", marginBottom: 10 }}>
                                                <View style={{ flexDirection: "row",justifyContent:"center",alignContent:"center" }}>
                                                    <View style={{ width: 30, height: 2, backgroundColor: item.label === "听力" ? "#FBB343" : "#0EBBAA", marginTop:8 }}></View>
                                                    <Text style={{ marginLeft: 10 }}>{item.label}</Text>
                                                </View>

                                            </View>
                                        </View>
                                    )
                                })
                            }

                        </View>
                  
                </View>
            </ ScrollView>
        )
    }
}
